window.addEventListener('load', function () {
    // 轮播图
    var focus = this.document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var w = ul.children[0].clientWidth;
    var index = 0;
    var translateX = 0;

    // 小圆圈排他选中
    function circleCurrent(num) {
        ol.querySelector('.current').classList.remove('current');
        ol.children[num].classList.add('current');
    }

    // 每隔两秒自动播放一张图
    var timer = setInterval(() => {
        // 图片：-1 0 1 2 3
        // 圆圈：2 0 1 2 0
        index++;
        transform();
    }, 2000);

    // 过渡结束触发，实现丝滑效果
    ul.addEventListener('transitionend', function () {
        // 图片播放到最后一张图时，重置索引号，并将轮播图无过渡的移动为第一张图
        if (index >= ul.children.length - 2) {
            index = 0;
            translateX = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translateX + 'px)';
            // 图片播放向前时，重置索引号，并将轮播图无过渡的移动到倒数第二图
        } else if (index < 0) {
            index = ul.children.length - 3;
            translateX = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }
        circleCurrent(index);
    })

    // 滑动轮播图
    var startX = 0;
    var moveX = 0;
    var flag = false; // 手指是否拖动了图片
    ul.addEventListener('touchstart', function (e) {
        // 记录手指初始坐标
        startX = e.targetTouches[0].pageX;
        // 触摸轮播图停止自动播放
        window.clearInterval(timer);
        timer = null;
    })
    ul.addEventListener('touchmove', function (e) {
        // 阻止屏幕默认行文，防止屏幕滚动
        e.preventDefault();
        moveX = e.targetTouches[0].pageX - startX;
        translateX = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        flag = true;
    })
    ul.addEventListener('touchend', function () {
        if (flag) {
            flag = false;
            // 移动距离大于50，下一张图
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                transform();
            } else {
                translateX = -index * w;
                ul.style.transition = 'all .1s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }
        }

        // 触摸轮播图停止自动播放
        clearInterval(timer);
        timer = setInterval(() => {
            // 图片：-1 0 1 2 3
            // 圆圈：2 0 1 2 0
            index++;
            transform();
        }, 2000);
    })

    // 过渡移动轮播图
    function transform() {
        translateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }
})